<template>
	<view class="page_content">
		<view class="inviteMe" @click="inviteMe=!inviteMe">
			<view>邀请我的人</view>
			<view class="t-icon t-icon-back2" v-if="inviteMe"></view>
			<view class="t-icon t-icon-back4" v-else></view>
		</view>
		<view class="list_me" v-if="!inviteMe&&inviteMeInfo!=null">
			<view class="item">
				<image :src="inviteMeInfo.picImg"></image>
				<view class="info">
					<view class="title">{{inviteMeInfo.phone}}</view>
					<view>{{inviteMeInfo.regeistTime}}</view>
				</view>
			</view>
		</view>
		<view class="myInvite" @click="myInvite=!myInvite">
			<view>我邀请的人</view>
			<view class="t-icon t-icon-back2" v-if="myInvite"></view>
			<view class="t-icon t-icon-back4" v-else></view>
		</view>
		<view class="list" v-if="!myInvite">
			<view class="item" v-for="(item,index) in inviteList" :key="item.userId">
				<image :src="item.picImg"></image>
				<view class="info">
					<view class="title">{{item.phone}}</view>
					<view>{{item.regeistTime}}</view>
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
			<view class='no-shop' v-if="inviteList.length<0 && !loading">
				<view class='pictrue' style="margin: 0 auto;text-align: center;">
					<!-- <image src='/static/images/no-shop.png'></image> -->
					<text>暂无数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInviteMeApi,
		getMyInviteListApi
	} from '@/api/user.js';
	export default {
		data() {
			return {
				where: {
					page: 1,
					limit: 20
				},
				inviteMe: true,
				myInvite: true,
				inviteList: [],
				loadTitle: '',
				loading: false,
				loadend: false,
				inviteMeInfo: null
			}
		},
		onShow() {
			this.getInviteMeUser();
			this.getMyInviteList()
		},
		methods: {
			getInviteMeUser() {
				getInviteMeApi().then(res =>{
					this.inviteMeInfo = res.data;
				});
			},
			getMyInviteList(isPage) {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				
				if (isPage === true) that.$set(that, 'inviteList', []);
				//加载弹窗
				that.loading = true;
				that.loadTitle = '';
				getMyInviteListApi(that.where).then(res => {
					let list = res.data.list;
					let inviteList = that.$util.SplitArray(list, that.inviteList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loadTitle = loadend ? this.$t('下拉加载更多数据') : this.$t('已无更多数据');
					that.$set(that, 'inviteList', inviteList);
					that.$set(that.where, 'page', that.where.page + 1);
					that.loading = false;
							
				}).catch(err => {
					that.loading = false;
					that.loadTitle = this.$t(`已无更多数据`);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_content{
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 100vh;
	}
	.inviteMe,.myInvite{
		padding: 20rpx 46rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.list_me,.list {
		padding: 20rpx 32rpx;
		
		.item{
			background-color: #fff;
			padding: 16rpx 20rpx;
			display: flex;
			
			image{
				width: 88rpx;
				height: 88rpx;
				border-radius: 100rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 52rpx;
			}
			
			.info{
				color: #979797;
				font-size: 22rpx;
				
				.title{
					color: #343643;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
